﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
</head>

<body style="padding: 15px">
    <div class="container">
        <!-- 添加图书的Panel面板 -->
        <div class="panel panel-primary">
            <div class="panel-heading clearfix">
                <h3 class="panel-title pull-left">添加新图书</h3>
                <span id="subBtn" class="btn btn-default btn-xs pull-right">+</span>
            </div>
            <form id="form1" class="panel-body row">
                <div class="col-sm-6 col-12 form-group">
                    <div class="input-group">
                        <div class="input-group-addon">书　名</div>
                        <input type="text" class="form-control" name="iptBookname" placeholder="请输入书名" />
                    </div>
                </div>
                <div class="col-sm-6 col-12 form-group">
                    <div class="input-group">
                        <div class="input-group-addon">作　者</div>
                        <input type="text" class="form-control" name="iptAuthor" placeholder="请输入作者" />
                    </div>
                </div>
                <div class="col-sm-6 col-12 form-group">
                    <div class="input-group">
                        <div class="input-group-addon">出版社</div>
                        <input type="text" class="form-control" name="iptPublisher" placeholder="请输入出版社" />
                    </div>
                </div>
                <div class="col-sm-6 col-12 form-group">
                    <div class="input-group">
                        <label class="input-group-btn">
                            <button class="btn btn-primary" id="tianjia">确认添加</button>
                        </label>
                    </div>
                </div>
                <div class="col-sm-6 col-12 form-group">
                    <div class="input-group">
                        <input type="search" class="form-control form-controll" οnkeydοwn="return false;" οnpaste="return false;" placeholder="请输入查询条件" />
                        <label class="input-group-btn">
                            <span class="btn btn-primary">
                                <input type="search" style="display: none" />查询
                            </span>
                        </label>
                    </div>
                </div>
            </form>
        </div>
        <!-- 图书的表格 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>
        <nav aria-label="Page navigation" style="display: flex;justify-content: center;">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <li id="charu">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        // 识别是否登录
        var token = localStorage.getItem("token");
        if (!token) {
            alert("令牌失效，请重新登录");
            location.href = "login.html";
        }
        // $.ajax的全局设置(拦截器)
        $.ajaxSetup({
            headers: {
                'Authorization': 'Bearer ' + token
            },
            error: function(jqXHR, textStatus, errorThrown) {
                switch (jqXHR.status) {
                    case (401):
                        alert("token失效");
                        localStorage.removeItem("token");
                        location.href = "login.html";
                        break;
                }
            }
        });
        // 查看用户信息
        $.ajax({
            url: "http://localhost:5001/user/info",
            type: "GET",

            success: function(res) {
                console.log(res);

            },
        });
        // 渲染分页按钮
        // 全局变量
        var quanjv = 1
        var shuling = 0
            // console.log(quanjv);
        $.ajax({
            url: "http://localhost:5001/book/getAll",
            type: "get",

            success: function(res) {

                // console.log(Math.ceil(res.data.length / 5));
                shuling = Math.ceil(res.data.length / 5)
                var charu = document.querySelector('#charu')
                var fenyes = document.querySelector('.pagination')
                for (let m = 0; m < shuling; m++) {

                    var oli = document.createElement('li')
                    oli.innerHTML = '<a href="#">' + (m + 1) + '</a>'
                    fenyes.insertBefore(oli, charu)
                }

                // 渲染分页页面

                var hhh = 0
                var fenyes = document.querySelector('.pagination')
                fenyes.addEventListener('click', function(e) {
                    console.log(quanjv);
                    if (e.path[0].innerText == "»") {
                        if (quanjv < shuling) {
                            xuanran(Number(quanjv++) + 1, 5)

                        } else {
                            alert('已经最底了哦')
                        }

                    } else if (e.path[0].innerText == "«") {
                        if (quanjv > 1) {
                            xuanran(Number(quanjv--) - 1, 5)
                        } else {
                            alert('已经最顶了哦')
                        }

                    } else {
                        xuanran(e.path[0].innerHTML, 5)
                        quanjv = e.path[0].innerHTML
                    }
                })
            },
        });
        // 获取所有图书
        var tbody = document.querySelector("#tb");
        xuanran(1, 5)

        function xuanran(pageIndex, pageSize) {
            $.ajax({
                url: "http://localhost:5001/book/getPage?pageIndex=" + pageIndex + "&pageSize=" + pageSize,
                type: "post",

                success: function(res) {
                    // console.log(res.data.length);
                    // console.log(res);
                    tbody.innerHTML = "";
                    for (let i = 0; i < res.data.length; i++) {
                        var otr = document.createElement("tr");
                        otr.innerHTML =
                            '<td id="hh">' +
                            res.data[i].id +
                            "</td>" +
                            "<td>" +
                            res.data[i].name +
                            "</td>" +
                            "<td>" +
                            res.data[i].author +
                            "</td>" +
                            "<td>" +
                            res.data[i].publisher +
                            "</td>" +
                            "<td>" +
                            new Date(parseInt(res.data[i].createDate) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ') +
                            "</td>" +
                            "<td>" +
                            '<a id="shanchu" data-id="' +
                            res.data[i].id +
                            '" href="javascript:;">删除</a>' +
                            "</td>";
                        tbody.appendChild(otr);
                        // console.log(res.data.length);
                    }
                },
            });
        }

        // 删除操作http://localhost:5001/book/del
        var tbody = document.querySelector("#tb");

        tbody.addEventListener("click", function(e) {
            // console.log(e);
            // console.log(e.target.parentNode.parentNode.firstElementChild.innerHTML);
            // console.log(e.target);
            if (e.target.nodeName == "A") {
                if (!confirm('确定要删除这条数据嘛？')) {
                    return false;
                }
                $.ajax({
                    url: "http://localhost:5001/book/absDel",
                    type: "post",
                    data: {
                        id: e.target.parentNode.parentNode.firstElementChild.innerHTML,
                    },

                    success: function(res) {
                        console.log(res);
                        xuanran(1, 5)
                        quanjv = 1
                    },
                });
            }
        });
        // 添加操作http://localhost:5001/book/insert
        var shujv = document.querySelectorAll(".form-control");
        var tianjia = document.querySelector("#tianjia");
        tianjia.addEventListener("click", function(e) {
            e.preventDefault();
            console.log(shujv);
            if (shujv[0].value != "") {
                $.ajax({
                    url: "http://localhost:5001/book/insert",
                    type: "post",
                    data: {
                        name: shujv[0].value,
                        author: shujv[1].value,
                        publisher: shujv[2].value,
                    },

                    success: function(res) {
                        console.log(res);
                        xuanran(shuling, 5)
                        quanjv = shuling
                    },
                });
                for (let i = 0; i < shujv.length; i++) {
                    shujv[i].value = "";
                }
            } else {
                alert("书名不能为空");

            }
        });
    </script>
</body>

</html>